<template>
  <div class="m-iselect">
    <el-select v-model="pvalue" placeholder="省份">
      <el-option
        v-for="item in province"
        :key="item.value"
        :label="item.label"
        :value="item"
      />
    </el-select>
    <el-select v-model="cvalue" :disabled="!pvalue===null?true:false" placeholder="城市">
      <el-option
        v-for="item in city"
        :key="item.value"
        :label="item.label"
        :value="item"
      />
    </el-select>
    <el-select v-model="rvalue" :disabled="!cvalue===null?true:false" placeholder="区域">
      <el-option
        v-for="item in region"
        :key="item.value"
        :label="item.label"
        :value="item"
      />
    </el-select>
    <el-autocomplete
      v-model="input"
      :fetch-suggestions="querySearchAsync"
      :disabled="rvalue===null?true:false"
      placeholder="请输入详情地址"
      @select="handleSelect"
    />
  </div>
</template>

<script>
import _ from "lodash";
export default {
  props: {
    reset_flag: {
      type: Number,
      default: 0
    },
    aForUpdate: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      province: [],
      pvalue: null,
      city: [],
      cvalue: null,
      input: "",
      details: [],
      rvalue: null,
      region: [],
      update_flag: 0
    };
  },
  watch: {
    pvalue: async function(newPvalue) {
      let self = this;
      if (newPvalue !== null) {
        let { status, data } = await self.$axios.get(
          `api/ws/district/v1/getchildren?id=${newPvalue.value}&key=4VIBZ-5EVE4-VP4UR-DST4G-EURJT-MSB5L`
        );
        if (status === 200) {
          this.city = data.result[0].map(item => {
            return {
              value: item.id,
              label: item.fullname
            };
          });
          if (this.update_flag === 1 && this.aForUpdate.length > 0) {
            const alist = this.aForUpdate.split(",");
            for (let i = 0; i < this.city.length; i++) {
              const el = this.city[i];
              if (alist[1] === el.label) {
                this.cvalue = {
                  value: el.value,
                  label: el.label
                };
                break;
              }
            }
            this.update_flag = 2;
          } else {
            this.cvalue = null;
          }
        }
      }
    },
    cvalue: async function(newCvalue) {
      let self = this;
      if (newCvalue !== null) {
        let { status, data } = await self.$axios.get(
          `api/ws/district/v1/getchildren?id=${newCvalue.value}&key=4VIBZ-5EVE4-VP4UR-DST4G-EURJT-MSB5L`
        );
        if (status === 200) {
          this.region = data.result[0].map(item => {
            return {
              value: item.id,
              label: item.fullname
            };
          });
          if (this.update_flag === 2 && this.aForUpdate.length > 0) {
            const alist = this.aForUpdate.split(",");
            for (let i = 0; i < this.region.length; i++) {
              const el = this.region[i];
              if (alist[2] === el.label) {
                this.rvalue = {
                  value: el.value,
                  label: el.label
                };
                break;
              }
            }
            this.update_flag = 0;
          } else {
            this.rvalue = null;
          }
        }
      }
    },
    reset_flag: async function(value) {
      if (value === 1) {
        this.pvalue = null;
        this.cvalue = null;
        this.rvalue = null;
        this.input = "";
        this.$emit('reset_flag', 0);
        // reset_flag = 0;
      }
    },
    aForUpdate: async function(value) {
      if (value.length > 0) {
        const alist = value.split(",");
        for (let i = 0; i < this.province.length; i++) {
          const el = this.province[i];
          if (alist[0] === el.label) {
            this.pvalue = {
              value: el.value,
              label: el.label
            };
            break;
          }
        }
        this.update_flag = 1;
        this.input = alist[3];
        // aForUpdate = "";
      }
    }
  },
  mounted: async function() {
    let self = this;
    //获取省份
    let { status, data } = await self.$axios.get(
      "api/ws/district/v1/list?key=4VIBZ-5EVE4-VP4UR-DST4G-EURJT-MSB5L"
    );
    if (status === 200) {
      self.province = data.result[0].map(item => {
        return {
          value: item.id,
          label: item.fullname
        };
      });
    }
  },
  methods: {
    querySearchAsync: _.debounce(async function(query, cb) {
      let self = this;
      if (query.length) {
        if (self.details.length) {
          cb(self.details.filter(item => item.value.indexOf(query) > -1));
        } else {
          let { status, data } = await self.$axios.get(
            "api/ws/place/v1/search?boundary=region("+ self.rvalue.value + ",0)&keyword=" +
              query +
              "&key=4VIBZ-5EVE4-VP4UR-DST4G-EURJT-MSB5L"
          );
          if (status === 200) {
            self.details = data.data.map(item => {
              return {
                value: item.title,
                address: item.address
              };
            });
            cb(self.details.filter(item => item.value.indexOf(query) > -1));
          } else {
            cb([]);
          }
        }
      }
    }, 200),
    handleSelect: function(item) {
      // this.$store.state.geo.position.city = item.city
      // this.$router.push({ path: "/"});
      const tmp = this.pvalue.label + "," + this.cvalue.label + "," + this.rvalue.label + "," + item.value;
      this.$emit('addr', tmp);
    }
  }
};
</script>

<style lang="scss">
@import "@/assets/css/changeCity/iselect.scss";
</style>
